
<script src="/static/lib/jexcel/2.0.2/jquery.jexcel.js"></script>
<link rel="stylesheet" href="/static/lib/jexcel/2.0.2/jquery.jexcel.min.css" type="text/css" />

<!--
<script src="/static/lib/jexcel/2.0.2/jquery.jdropdown.js"></script>
<script src="/static/lib/jexcel/2.0.2/jquery.jcalendar.js"></script>
<link rel="stylesheet" href="/static/lib/jexcel/2.0.2/jquery.jdropdown.min.css" type="text/css" />
<link rel="stylesheet" href="/static/lib/jexcel/2.0.2/jquery.jcalendar.min.css" type="text/css" />
-->

<style type="text/css">
/** 用于编辑时的换行 **/
.jexcel .editor {
    white-space: pre-wrap;
}
.jexcel td {
    word-break: break-all;
}
</style>

{% include "note/view_header.html" %}

<textarea id="content" class="hide">{{file.content}}</textarea>
<div id="myParent" class="row">
    <div id="my"></div>
</div>

<div class="row">
    <button id="saveBtn">保存</button>
</div>

<script type="text/javascript">

$(function () {
    var content = $("#content").val();
    var rows  = CSV.parse(content);

    if (rows.length == 0) {
        rows = [
            ['A', 'B', 'C', 'D', 'E'],
            ['', '', '', '', '']
        ];
    }

    var head = rows[0];
    var data = rows.slice(1);
    var columns = [];
    var colWidths = [];

    var width = ($("#myParent").width() - 35) / head.length;
    width = Math.max(width, 50);
    
    head.forEach(function () {
        columns.push({type: "text"});
    });

    head.forEach(function () {
        colWidths.push(width);
    });

    var excel = $('#my').jexcel({
        // csv: $("#content").val(),
        data: data,
        colHeaders: head,
        colWidths: colWidths,
        columns: columns,
        wordWrap: true,
        columnSorting: false
    });

    $("#saveBtn").click(function () {
        var head = $("#my").jexcel("getHeaders");
        var data = $("#my").jexcel('getData');
        data.splice(0, 0, head);
        var csvData = CSV.encode(data);
        console.log(csvData);
        $.post("/note/save?type=csv", {id:"{{file.id}}", version:{{file.version}}, content:csvData}, function (resp) {
            console.log(resp);
            if (resp.code == "success") {
                // window.location.reload();
                window.location.href = "/note/view?id={{file.id}}";
            } else {
                alert(resp.message);
            }
        })
    });

    $("body").on("click", ".edition", function (e) {
        console.log(e.target);
    });
});
</script>
</html>